<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>下班</title>
    <style>
        :root {
            --primary-color: #4a90e2;
            --hover-color: #357abd;
            --background: #f8f9fa;
        }
        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background: var(--background);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }
        .tab-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
            width: 90%;
            max-width: 500px;
            overflow: hidden;
        }
        .tabs {
            display: flex;
            background: linear-gradient(145deg, #f1f3f5, #e9ecef);
        }
        .tab {
            flex: 1;
            padding: 16px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: #666;
            font-weight: 500;
            position: relative;
        }
        .tab.active {
            color: var(--primary-color);
            background: white;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }
        .tab::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 3px;
            background: var(--primary-color);
            transition: all 0.3s ease;
        }
        .tab.active::after {
            width: 100%;
            left: 0;
        }
        .tab-content {
            padding: 30px 25px;
            display: none;
        }
        .tab-content.active {
            display: block;
            animation: fadeIn 0.4s ease;
        }
        .input-group {
            margin-bottom: 20px;
        }
        input {
            width: 93%;
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
            outline: none;
        }
        .submit-btn {
            background: linear-gradient(135deg, var(--primary-color), var(--hover-color));
            color: white;
            padding: 14px 30px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            width: 100%;
            margin-top: 10px;
        }
        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(74, 144, 226, 0.3);
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    <div class="tab-container">
        <div class="tabs">
            <div class="tab active" onclick="switchTab(1)">WiFi配置</div>
            <div class="tab" onclick="switchTab(2)">上下班配置</div>
        </div>

        <div class="tab-content active" id="content1">
            <div class="input-group">
                <input type="text" placeholder="请输入WiFi名称">
            </div>
            <div class="input-group">
                <input type="text" placeholder="请输入WiFi密码">
            </div>
            <button class="submit-btn" onclick="handleSubmit(1)">开始联网</button>
        </div>

        <div class="tab-content" id="content2">
            <div class="input-group">
                <input type="text" placeholder="输入蓝牙名称">
            </div>
            <div class="input-group">
                <input type="text" placeholder="输入时间,如8:02">
            </div>
            <button class="submit-btn" onclick="handleSubmit(2)">提交配置</button>
        </div>
    </div>

    <script>
        function switchTab(tabNumber) {
            // 切换选项卡
            document.querySelectorAll('.tab').forEach((tab, index) => {
                tab.classList.toggle('active', index === tabNumber - 1);
            });
            // 切换内容
            document.querySelectorAll('.tab-content').forEach((content, index) => {
                content.classList.toggle('active', index === tabNumber - 1);
            });
        }

        function handleSubmit(menuNumber) {
            const inputs = document.querySelectorAll(`#content${menuNumber} input`);
            const values = Array.from(inputs).map(input => input.value);
            // 这里可以添加提交逻辑
            console.log(`提交菜单 ${menuNumber} 内容:`, values);
            commitConfig(menuNumber, values)
            // 简单动画反馈
            const btn = document.querySelector(`#content${menuNumber} .submit-btn`);
            btn.style.transform = 'scale(0.98)';
            setTimeout(() => {
                btn.style.transform = '';
            }, 100);
            // 可以根据需要添加表单验证
        }
        function commitConfig(menuNumber, values){
            if (menuNumber == 1){
                var data = {
                    "router_ssid":values[0],
                    "router_pwd":values[1]
                }
            } 
            else if(menuNumber == 2){
                var data = {
                "idenfi_id":values[0],
                "onwork_time":values[1]
                }
            }
            var xhttp = new XMLHttpRequest();
            xhttp.open("POST", "/setinfo", true);
            xhttp.onreadystatechange = function() {
                if (xhttp.readyState == 4) {
                    if (xhttp.status == 200) {
                        console.log(xhttp.responseText);
                        let objJson = JSON.parse(xhttp.responseText)
                        if(objJson.set === "error")
                        {
                            alert("Can not connect to wifi!");
                        }
                        else if(objJson.set === "ok")
                        {
                            alert("Will connect to wifi!");
                        }
                        else if (objJson.deviceIp.length != 0) 
                        {
                            var message = "Connected to WiFi! Ip:" + objJson.deviceIp
                            alert(message);
                        }
                    } else if (xhttp.status == 0) {
                        alert("Server closed the connection abruptly!");
                    } else {
                        alert(xhttp.status + " Error!\n" + xhttp.responseText);
                    }
                }
            };
            xhttp.send(JSON.stringify(data));
        }
    </script>
</body>
</html>